<template>
    <div class="mt-20">
        <!-- <el-form :inline="true" :model="condition" class="search-form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="车牌号">
                        <el-input v-model="condition['search_LIKE_plateNumber']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态">
                        <el-select v-model="condition['search_EQ_status']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictCommandStatus" :key="key" :label="val" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" icon="el-icon-search" @click="loadData">查 询</el-button>
                </el-col>
            </el-row>
        </el-form> -->
        <el-form :inline="true" :model="condition" class="search-form mt-10" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="车号" clearable>
                        <el-input v-model="condition['search_LIKE_carNo']" clearable></el-input>
                    </el-form-item>
                </el-col>
                <!--<el-col :span="8">-->
                <!--<el-form-item label="作业状态">-->
                <!--<el-select v-model="condition['search_EQ_status']" placeholder="请选择" clearable>-->
                <!--<el-option v-for="[key, val] in _dictCommandStatus" :key="key" :label="val" :value="key"></el-option>-->
                <!--</el-select>-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <el-col :span="8">
                    <el-button type="primary" icon="el-icon-search" @click="loadData">查 询</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="directive" border stripe max-height="500">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="jobPurpose" label="作业目的"  min-width="120">
                <template slot-scope='scope'>
                    {{ scope.row.jobPurpose | _filterJobPurpose }}
                </template>
            </el-table-column>
            <el-table-column prop="action" label="指令"  min-width="120">
                <template slot-scope='scope'>
                    {{ scope.row.action | _filterJobAction }}
                </template>
            </el-table-column>
            <el-table-column prop="jobStatus" label="指令状态"  min-width="140">
                <template slot-scope='scope'>
                    {{scope.row.jobStatus | _filterCommandStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="carNo" label="车号"  min-width="120"></el-table-column>
            <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="purposeField" label="目的场位"  min-width="120"></el-table-column>
            <!--<el-table-column prop="endTime" label="指令完成时间"  min-width="160"></el-table-column>-->
        </el-table>
        <mqtt ref="directive" destination="USERS/wzjzx/command" :qos="0" @payload="handlePayload"></mqtt>
    </div>
</template>

<script>
    import { getCommandPage, commandPush } from "@/api/middleControl/middleControl";
    import mqtt from "@/components/webSocket/mqtt";

    export default {
        components: {
            mqtt
        },
        data() {
            return {
                directive: [],
                condition: {},
                pageSearch: getCommandPage
            };
        },
        mounted() {
            this.loadData();
            commandPush()
        },
        methods: {
            loadData() {
                this.$refs.directive.loadData();
            },
            handlePayload(item) {
                console.log('获取到新数据: ');
                console.log(item);
                this.directive.splice(0, this.directive.length)
                this.directive.push(...item)
                const params = this.$assist.copySearchConditions(this.condition);
                this.directive = this.directive.filter(f => {
                    return f.transportMode==='CR'&&(f.jobPurpose==='JC'||f.jobPurpose==='TX')
                })
                if (params.search_LIKE_carNo) {
                    this.directive = this.directive.filter(f => {
                        return f.carNo && f.carNo.indexOf(params.search_LIKE_carNo) > -1
                    })
                }
                // if(params.search_EQ_status){
                //     this.directive=this.directive.filter(f=>{
                //         return params.search_EQ_status===f.jobStatus
                //     })
                // }
            }
        }
    };
</script>

<style>
</style>
